<template>
	<view class="title">登录</view>
	<view class="ipt">
		<input type="number" v-model="tel" placeholder="请填写手机号" />
	</view>
	<view class="ipt">
		<input type="text" v-model="yzm" placeholder="请填写验证码" />
		<view class="flex-center" @click="getyzm">获取验证码</view>
	</view>
	<view class="zc" @click="zc">注册</view>
	<view class="flex-center login" @click="login">登录</view>
	<view class="xieyi" @click="agreechange">
		<image src="@/static/gou2.png" v-if="agree" mode=""></image>
		<image src="@/static/gou.png" v-else mode=""></image>
		<text>已详细阅读并同意</text>
		<text style="color:#A9070C;" @click="goxieyi">《用户协议》</text>
	</view>
</template>

<script setup>
	import {
		smsLogin,getOpenId,authUrl,
		miniUserInfo
	} from "@/api/account.js"
	import {
		ref,onBeforeMount,
	} from 'vue';
	import {
		onUnload,
		onHide
	} from '@dcloudio/uni-app';

	onUnload(() => {

		if (time60) {
			clearTimeout(time60);
			time60 = null;
		}
	})
	onHide(() => {

		if (time60) {
			clearTimeout(time60);
			time60 = null;
		}
	})

	let agree = ref(false)

	function agreechange() {
		agree.value = !agree.value
	}

	function goxieyi() {
		uni.navigateTo({
			url: "/pages/login/xieyi?type=1"
		})
	}
	import {
		useSystemStore
	} from '@/stores/system.js'
	const systemInfo = useSystemStore()
	systemInfo.configName = '夏'
	/**
	 * 结束定时器
	 */
	let time60 = null
	let time = ref(0)

	function endInter() {
		clearInterval(time60)
	}

	function login() {
		if (!tel.value) {
			uni.showToast({
				title: "请输入手机号",
				icon: "none"
			})
			return
		}
		if (!yzm.value) {
			uni.showToast({
				title: "请输入验证码",
				icon: "none"
			})
			return
		}
		
		smsLogin({
			phonenumber:tel.value,
			code:yzm.value
		}).then(res=>{
			uni.setStorageSync('token',res.data)
			getUserInfo()
			uni.switchTab({
				url:"/pages/index/index"
			})
			return
			window.location.href = 'https://xszongci.xinguanghudong.com/h5'
			
		})
		
		
	}
	function getUserInfo(){
		miniUserInfo().then(res=>{
			uni.setStorageSync('userInfo',res.data)
		})
	}
	// 点击获取验证码
	function getyzm() {

		if (tel.value == '') {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			})
			return false;
		}
		uni.showLoading({
			mask: true
		})
		uni.showToast({
			title: "发送成功",
			icon: "none"
		})
		time.value = 60
		let i = 0
		time60 = setInterval(function() {

			i = i + 1
			time.value = time.value - 1

		
			if (time.value == 0) {
				clearInterval(time60)
			}
		}, 1000)



	}

	let tel = ref('')
	let yzm = ref('')

	function zc() {
		uni.redirectTo({
			url: "/pages/login/register"
		})
	}
	
	onBeforeMount(() => {
		// getOpen()
	})
	
	
	async function getOpen() {
		let APPID = 'wx8063fe9f7ea16676'
		const local = window.location.href
		uni.setStorageSync('local', local)
		
		authUrl({url:local}).then(async res=>{
			let url =res.data
			if (window.location.href.indexOf('code=') != -1) { // 避免一直重复重定向无限获取code
				
				let code = await getUrlName('code') // 从url中获取code的值
				if (code == uni.getStorageSync(
					'code')) { // 微信获取code会重定向，所以从别的页面返回本页后，返回的其实是重定向之后的url,此时url一定带有上次的code,code只能用一次，这时候要重新获取
					let urls = await deUrlParam(window.location.href, ['code']) // 从url中删除code
					// window.location.href = urls
					location.replace(urls)
					// window.location.replace(urls)
				}else{
					codegetOpenId(code)
				}
				uni.setStorageSync('code', code)
			} else {
				location.replace(url)
				// window.location.replace(url)
			}	
		})
	}
	function codegetOpenId(e){
		getOpenId({wxCode:e}).then(res=>{
			uni.setStorageSync('openid',res.data.openid)
		})
	}
	
	const getUrlName = (paramName) => {
		const url = window.location.href;
		const regex = new RegExp(`${paramName}=([^&]*)`);
		const match = regex.exec(url);
		if (match) {
			return match[1];
		} else {
			return null;
		}
	}
	
	
	//删除URL中指定search参数,会将参数值一起删除，返回没有该参数的完整url
	const deUrlParam = (url, params) => {
		/**
		 * 删除URL中指定search参数,会将参数值一起删除
		 * @param {string} url 地址字符串
		 * @param {array} aParam 要删除的参数key数组，如['name','age']
		 * @return {string} 返回新URL字符串
		 */
		for (var index = 0; index < params.length; index++) {
			var item = params[index];
			var fromIndex = url.indexOf(item + "="); //必须加=号，避免参数值中包含item字符串
			if (fromIndex !== -1) {
				// 通过url特殊符号，计算出=号后面的的字符数，用于生成replace正则
				var startIndex = url.indexOf("=", fromIndex);
				var endIndex = url.indexOf("&", fromIndex);
				var hashIndex = url.indexOf("#", fromIndex);
	
				var reg = "";
				if (endIndex !== -1) {
					// 后面还有search参数的情况
					var num = endIndex - startIndex;
					reg = new RegExp(item + "=.{" + num + "}");
					url = url.replace(reg, "");
				} else if (hashIndex !== -1) {
					// 有hash参数的情况
					var num = hashIndex - startIndex - 1;
					reg = new RegExp("&?" + item + "=.{" + num + "}");
					url = url.replace(reg, "");
				} else {
					// search参数在最后或只有一个参数的情况
					reg = new RegExp("&?" + item + "=.+");
					url = url.replace(reg, "");
				}
			}
		}
		var noSearchParam = url.indexOf("=");
		if (noSearchParam === -1) {
			url = url.replace(/\?/, ""); // 如果已经没有参数，删除？号
		}
		return url;
	}
	
	
	
	
	
</script>

<style lang="scss" scoped>
	page {
		background-image: url('@/static/bgimg.png');
		background-size: 100% 100%;
	}
	.xieyi {
		display: flex;
		margin-left: 40rpx;
		margin-top: 30rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 24rpx;
			color: #666;
			margin-right: 10rpx;
		}

	}

	.login {
		margin-top: 120rpx;
		width: 670rpx;
		height: 100rpx;
		background: #C7A46F;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 32rpx;
		margin-left: 40rpx;
		color: #FFFFFF;
	}

	.title {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 60rpx;
		color: #262626;
		margin: 0 40rpx;
		margin-bottom: 64rpx;
		padding-top: 40rpx;
	}

	.zc {
		width: 650rpx;
		margin-left: 40rpx;
		text-align: right;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #C7A46F;

	}

	.ipt {
		width: 670rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		margin-left: 40rpx;
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		input {
			margin-left: 40rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			width: 380rpx;
		}

		&>view {
			width: 230rpx;
			height: 100rpx;
			background: #C7A46F;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>